<template>
  <view class="home-container">
    <div class="bg" v-if="!isFirst">
      <image :src="bgImg" class="img-center" />

      <view class="status_bar">
        <!-- 这里是状态栏 -->
      </view>

      <view class="top-info">
        <view class="top-item">
          <image :src="icon_ap" alt="闪电" />
          <view class="number">{{ ap }}</view>
        </view>
        <view class="top-item">
          <image :src="icon_gc" alt="金币" />
          <view class="number">{{ gc }}</view>
        </view>
      </view>
    </div>

    <div class="bg" v-else>
      <view class="status_bar">
        <!-- 这里是状态栏 -->
      </view>

      <!-- 精力瓶和金币 -->
      <view class="top-info">
        <view class="top-item">
          <image :src="icon_ap" alt="闪电" />
          <view class="number">{{ ap }}</view>
        </view>
        <view class="top-item">
          <image :src="icon_gc" alt="金币" />
          <view class="number">{{ gc }}</view>
        </view>
      </view>

      <!-- 地址和搜索栏 -->
      <view class="search-area">
        <view class="city" @click="changeCity">{{ city }}</view>
        <view class="search-box">
          <uni-easyinput
            prefixIcon="search"
            v-model="buildParams.keyWord"
            placeholder="搜索"
            @iconClick="searchKeyWord"
            @confirm="searchKeyWord"></uni-easyinput>
        </view>
      </view>

      <!-- 分类 -->
      <view class="category-tabs">
        <view
          class="category-tab"
          :class="index === categoryIndex ? 'active' : ''"
          v-for="(category, index) in categoryArr"
          :key="index"
          @click="handleCategory(category, index)">
          <view class="label">{{ category.label }}</view>
          <view v-if="category.status === 1" class="count">{{
            category.count
          }}</view>
          <view v-else class="img-box">
            <image class="img-center" :src="categoryDefaultIcon" alt="未解锁" />
          </view>
        </view>
      </view>

      <!-- 排序 -->
      <view class="sort-options">
        <view class="sort-option">
          <uni-data-select
            v-model="buildParams.sort"
            :localdata="sortRange"
            @change="sortChange"></uni-data-select>
        </view>

        <view class="sort-option">
          <uni-data-select
            v-model="buildParams.distance"
            :localdata="distanceRange"
            @change="distanceChange"></uni-data-select>
        </view>
      </view>

      <scroll-view
        :scroll-top="scrollTop"
        scroll-y="true"
        class="scroll-Y"
        @scrolltoupper="upper"
        @scrolltolower="lower"
        @scroll="scroll">
        <!-- 建筑物 -->
        <view class="content-area" v-if="buildingArr.length > 1">
          <view
            class="build-item"
            v-for="(build, index) in buildingArr"
            :key="index">
            <image class="img" :src="build.src" />
          </view>
        </view>

        <!-- 默认建筑物 -->
        <view class="content-area" v-else>
          <view class="defaultBox">
            <image class="img-center" :src="defaultShopImg" />
          </view>
        </view>

        <view class="tips" v-show="total === buildingArr.length"
          >没有更多消息了</view
        >
      </scroll-view>
    </div>

    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff" @change="change">
      <view
        class="popup-content"
        :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <view class="text"
          >我的商店街暂未有xx类的商店入驻，<br />快去解锁来入驻</view
        >
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getBuildList, getUserInfo } from '@/api/home';
export default {
  data() {
    return {
      bgImg: 'https://qiniuoss.chenxi618.com/test.jpg',
      icon_ap: '../../static/images/lightning.png',
      ap: 7, //行动点Action Points，甲方称为“体力值”
      icon_gc: '../../static/images/coin.png',
      gc: 2245, //金币Gold Coin，甲方称为“虚拟币”
      city: '福州市',

      categoryArr: [
        {
          label: '全部',
          count: 17,
          value: 0,
          status: 1,
        },
        {
          label: '玩具租赁',
          count: 6,
          value: 1,
          status: 1,
        },
        {
          label: '茶饮',
          count: 11,
          value: 2,
          status: 1,
        },
        {
          label: '教育培训',
          count: 0,
          value: 3,
          status: 0,
        },
        {
          label: '娱乐',
          count: 0,
          value: 4,
          status: 0,
        },
        {
          label: '服饰',
          count: 0,
          value: 5,
          status: 0,
        },
        {
          label: '亲子户外',
          count: 0,
          value: 6,
          status: 0,
        },
      ],
      categoryIndex: 0,
      categoryDefaultIcon: '../../static/images/categoryDefaultIcon.png',

      sortRange: [
        {
          text: '综合排序',
          value: 0,
        },
        {
          text: '数量排序',
          value: 1,
        },
        {
          text: '使用排序',
          value: 2,
        },
      ],
      distanceRange: [
        {
          text: '距离',
          value: 0,
        },
        {
          text: '1.0公里以内',
          value: 1,
        },
        {
          text: '1.0-2.0公里以内',
          value: 2,
        },
      ],

      defaultShopImg: '../../static/images/defaultShopImg.png',
      buildParams: {
        page: 1,
        pageSize: 10,
        sort: 0,
        distance: 0,
        keyWord: '',
        cid: 0,
      },
      buildingArr: [],
      buildingArrAdd: [
        {
          id: 1,
          url: '',
          src: '../../static/images/builds/build01.png',
        },
        {
          id: 2,
          url: '',
          src: '../../static/images/builds/build02.png',
        },
        {
          id: 3,
          url: '',
          src: '../../static/images/builds/build03.png',
        },
        {
          id: 4,
          url: '',
          src: '../../static/images/builds/build04.png',
        },
        {
          id: 5,
          url: '',
          src: '../../static/images/builds/build05.png',
        },
        {
          id: 6,
          url: '',
          src: '../../static/images/builds/build06.png',
        },
        {
          id: 7,
          url: '',
          src: '../../static/images/builds/build07.png',
        },
        {
          id: 8,
          url: '',
          src: '../../static/images/builds/build08.png',
        },
        {
          id: 9,
          url: '',
          src: '../../static/images/builds/build09.png',
        },
        {
          id: 10,
          url: '',
          src: '../../static/images/builds/build10.png',
        },
      ],

      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      total: 0,
      href: 'https://uniapp.dcloud.io/component/README?id=uniui',
    };
  },
  computed: {
    isFirst() {
      return this.$store.getters.isFirst;
    },
  },
  onLoad() {
    // 模拟第一次登录之后，修改isFirst状态值
    setTimeout(() => {
      this.$store.dispatch('IsFirst', true);
    }, 2000);

    this.getUserInfo();
    this.getBuildList();
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      let res = await getUserInfo();
      console.log(res, 'getUserInfo');
    },
    // 选择分类，对应参数改变，列表需要重新渲染
    handleCategory(item, index) {
      console.log(item, index);
      if (item.status === 1) {
        this.categoryIndex = index;
      } else {
        // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.popup.open('center');
      }

      this.cid = item.value;
      this.getBuildList();
    },
    // 获取建筑物列表
    async getBuildList() {
      let res = await getBuildList(this.buildParams);
      console.log(res, 'getBuildList');

      setTimeout(() => {
        if (this.buildParams.page > 3) {
          console.log('没有更多数据了');
          this.total = this.buildingArr.length;
        } else {
          this.buildingArr = [...this.buildingArr, ...this.buildingArrAdd];
          this.buildParams.page++;
        }

        console.log(this.buildingArr, this.buildingArr.length, 'getBuildList');
      }, 2000);
    },
    upper: function (e) {
      console.log(e);
    },
    lower: function (e) {
      console.log(e);
      this.getBuildList();
    },
    scroll: function (e) {
      console.log(e);
      this.old.scrollTop = e.detail.scrollTop;
    },
    change(e) {
      console.log('当前模式：' + e.type + ',状态：' + e.show);
    },
    sortChange() {},
    distanceChange() {},
    changeCity() {
      console.log('定位页面正在建设中');
      /* uni.navigateTo({
					url: '/pages/tools/location/index'
				}); */
    },
    searchKeyWord() {
      console.log('搜索列表页面正在建设中');
      /* uni.navigateTo({
					url: '/pages/tools/search/index'
				}); */
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.img-box {
  position: relative;
  width: 40rpx;
  height: 40rpx;
  margin: 0 auto;
}
.scroll-Y {
  height: 800rpx;
  padding-bottom: 40rpx;
}
</style>
